<template>
	<view>
		<!-- 背景图 -->
		<view class="bg">
			<image src="../../../../static/finishbg.png" mode="" ></image>
		</view>
		
		<!-- 拍卖状态 -->
<view class="state">
	<view style="margin-top: 10rpx;">
		<view class="money">
			<text>¥200</text>
		</view>
		<view class="moment">
			<text>当前价</text>
		</view>
	</view>
	
	<view class="time">
		<view>
			<text>距结拍仅剩</text>
		</view>
		<view>
			<u-count-down :timestamp="86400" :show-days="true" :show-hours="true" :show-seconds="true" :hide-zero-day="false" bg-color="#851c1b" color="#ffffff"></u-count-down>
		</view>
	</view>
</view>
		
		<!-- 拍卖品详情 -->
		<view class="name">
			<view>
				<text class="person">柳子峻《三羊开泰》</text>
			</view>
			<view class="size">
				<text>三尺竖幅 (90*70cm) </text>
			</view>
		</view>
		
		<!-- 拍卖价格 -->
		<view class="price">
			<view class="start">
				<view>
					<text>起拍价</text>
				</view>
				<view>
					<text>¥500,000</text>
				</view>
			</view>
			
			<view class="mark-up">
				<view>
					<text>加价幅度</text>
				</view>
				<view>
					<text>¥10,000</text>
				</view>
			</view>
			
			<view class="promise">
				<view>
					<text>保证金</text>
				</view>
				<view>
					<text>¥90000</text>
				</view>
			</view>
		</view>
		
		<!-- 出价记录 -->
		<view class="history">
			<view class="title">
				<text>出价记录</text>
			</view>
			<!-- 出价详情 -->
			<view class="detail">
				<view>
					<image src="../../../../static/person.jpg" mode=""></image>
				</view>
				<view>
					<text>躺板板</text>
				</view>
				<view>
					<text>07.28&nbsp16:00</text>
				</view>
				<view >
					<text class="price">¥1200</text>
				</view>
				<view class="first">
					<u-button type="error" class="btn1">领先</u-button>
				</view>
			</view>
			
			<view class="detail" v-for="(item,index) in stateList" :key = index>
				<image :src="item.imgUrl" mode=""></image>
				<text>{{item.name}}</text>
				<text>{{item.time}}</text>
				<text>{{item.price}}</text>
				<view class="second">
					<u-button type="error" class="btn2">{{item.state}}</u-button>
				</view>
			</view>
		
		</view>
		
		<!-- 拍品详情 -->
		<view class="detail-bar">
					<text>拍品详情</text>
			<view class="introduce">
				<view class="name">
								<text class="name">作品名称</text>
							</view>
				<view class="paint">
					<text>《春山帆影》</text>
				</view>
			</view>
			
			<view class="introduce">
				<view class="name">
								<text class="name">作品名称</text>
							</view>
				<view class="paint">
					<text>《春山帆影》</text>
				</view>
			</view>
			
		
		<view class="foot-bar">
			<view class="home">
				<image src="../../../../static/首页@2x.png" mode=""></image>
				<view>
					<text>首页</text>
				</view>
			</view>
			
			<view class="service">
				<image src="../../../../static/客服@2x.png" mode=""></image>
				<view>
					<text>客服</text>
				</view>
			</view>
			
			<view class="favorite">
				<image src="../../../../static/未收藏@2x.png" mode=""></image>
				<view>
					<text>收藏</text>
				</view>
			</view>
			
			<view class="button">
				<u-button type="error" class="btn">立即出价</u-button>
			</view>
		</view>

	</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				timestamp: 86400,
				stateList:[
					{
						imgUrl:'../../../../static/person.jpg',
						name:'金铲铲',
						time:'07.28 16:00',
						price:'¥1050',
						state:'出局'
					}
				]
			}
		},
		methods: {
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
			},
			// ref形式获取内部的值
			getSeconds() {
				console.log(this.$refs.uCountDown.seconds);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg image{
		width: 100%;
	}
	
	.state {
		width: 100%;
		background: linear-gradient(to right, #fe8707 ,#fea807);
		height: 140rpx;
		display: flex;
		justify-content: space-around;
		margin-top: -20rpx;
	}
	
	.state .money{
		font-size: 40rpx;
		color: #ffffff;
		font-weight: 700;
	}
	
	.state .moment{
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 400;
	}
	
	.state .time{
		margin-top: 16rpx;
	}
	
	.time text {
		font-size: 28rpx;
		color: #ffffff;
	}
	
	.name .person{
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}
	
	.name .size{
		font-size: 24rpx;
		color: #939393;
		font-weight: 400;
		margin-left: 20rpx;
	}
	
	.price{
		width: 92%;
		margin: 4%;
		background-color: #f4f4f8;
		display: flex;
		justify-content: space-around;
		border-radius: 10rpx;
	}
	
	.title{
		font-size: 28rpx;
		color: #939393;
		margin-left: 20rpx;
	}
	
	.detail{
		height: 80rpx;
		display: flex;
		margin-left: 20rpx;
		justify-content: space-around;
	}
	
	.detail .price{
		color: #c6100e;
	}
	
	.detail image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	.detail text {
		line-height: 60rpx;
	}
	
	.detail .btn1 {
		height: 40rpx;
		width: 120rpx;
		margin-top: 10rpx;
	}
	
	.detail .btn2 {
		height: 40rpx;
		width: 120rpx;
		background-color: #cccccc;
		margin-top: 10rpx;
	}

	.introduce{
		display: flex;
	}
	
	.detail-bar text {
		font-weight: 700;
		margin-left: 40rpx;
	}
	
	.detail-bar .name{
		color: #838384;
		background-color: #f4f4f8;
		font-weight: 400;
		font-size: 28rpx;
	}
	
	.detail-bar .paint{
		color: #838384;
		font-weight: 400;
		font-size: 28rpx;
	}
	
	.foot-bar {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	
	.foot-bar text {
		font-size: 20rpx;
		font-weight: 400;
	}
	
	.foot-bar image{
		width: 40rpx;
		height: 40rpx;
		margin-left: 40rpx;
	}
	
	.foot-bar .btn {
		width: 440rpx;
		margin-top: 10rpx;
	}
</style>

